import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:mokeng/utils/utils.dart';
import 'package:mokeng/values/values.dart';
import 'package:mokeng/widgets/widgets.dart';

class StoreItemRecommend extends StatefulWidget {
  const StoreItemRecommend({super.key, this.productData});

  final dynamic productData;

  @override
  State<StoreItemRecommend> createState() => _StoreItemRecommendState();
}

class _StoreItemRecommendState extends State<StoreItemRecommend> with SingleTickerProviderStateMixin {
  //SingleTickerProviderStateMixin和AnimationController的vsync配合指每个Ticker刷新一下布局，
  //AnimationController实际也是一个Animation<double>, 但upperBound必须比lowerBound大，没办法实现缩小，故需定义scaleAnimation
  late AnimationController animationController;
  late Animation<double> scaleAnimation;

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(vsync: this, duration: const Duration(milliseconds: 1000));
    scaleAnimation = Tween<double>(begin: 1.0, end: 0.95)
        .chain(CurveTween(curve: const Interval(0.8, 1))) //意思是前面80%时间不做动画， 后面20%时间做动画
        .animate(animationController); //Tween只定义了开始和结束的值，但需要AnimationController来驱动
  }

  void _startAnimation() {
    setState(() => animationController.forward());
  }

  void _cancelAnimation() {
    setState(() => animationController.reverse());
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (_) => {_startAnimation()},
      onTapUp: (_) => {_cancelAnimation()},
      onTapCancel: () => {_cancelAnimation()},
      child: ScaleTransition(scale: scaleAnimation, child: _productItem()),
      // child: ScaleTransition(scale: animationController.drive(Tween<double>(begin: 1.0, end: 0.95)), child: _productItem()),
      // child: AnimatedBuilder( //自定义显式动画
      //   animation: scaleAnimation,
      //   builder: (context, child) {
      //     return Transform.scale(
      //       scale: scaleAnimation.value,
      //       child: child,
      //     );
      //   },
      //   child: _productItem(), //不变的可以定义在这里，builder中的child就是这里定义的
      // ),
    );
  }

  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }

  Widget _productItem() {
    return Card(
      color: Colors.white,
      elevation: 10,
      margin: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
      child: Column(
        children: [
          Container(
            height: 60.h,
            padding: EdgeInsets.symmetric(horizontal: 16.w),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                const Text('2024-5-5'),
                const Spacer(),
                Image.asset('assets/images/mine_ic_create.webp', width: 22.w, height: 22.w),
                4.vGap,
                const Text('4')
              ],
            ),
          ),
          Image.network(
            widget.productData['picUrls'][0],
            height: 375 * num.parse(widget.productData['coverHeight']) / num.parse(widget.productData['coverWidth']),
            fit: BoxFit.cover,
          ),
          Container(
            margin: EdgeInsets.only(left: 14.w, top: 14.h, right: 14.w),
            child: Text(
              widget.productData['content'],
              style: TextStyle(
                fontWeight: FontWeight.bold,
                color: AppColors.primaryText,
                fontSize: 16.sp,
                height: 1,
              ),
            ),
          ),
          Container(
            height: 60.h,
            padding: EdgeInsets.symmetric(horizontal: 16.w),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                netImageCached(
                  widget.productData['userAvatar'],
                  width: 34,
                  height: 34,
                ),
                4.vGap,
                Text(
                  widget.productData['userName'],
                  style: TextStyle(
                    color: AppColors.primaryText,
                    fontSize: 12.sp,
                    height: 1,
                  ),
                ),
                const Spacer(),
                Container(
                  width: 64.w,
                  height: 32.h,
                  decoration: BoxDecoration(color: AppColors.primaryElement, borderRadius: 16.radius),
                  child: Center(
                    child: Text(
                      '4',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                        fontSize: 14.sp,
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}